import React from 'react';
import { Balloon, Button, Card,Icon,Select } from '@alifd/next';
import { Chart, Geom,Coord,Tooltip,Axis } from 'bizcharts';
import {two as mock} from '../../mock';

import styles from './index.module.scss';

interface ChartItem {
  date?: string;
  value?: number;
}

interface CardConfig {
  title?: string | React.ReactDOM;
  subTitle?: string | React.ReactDOM;
  value?: string;
  chartData?: ChartItem[];
  des?: string;
  rate?: string;
  chartHeight?: number;
}

const DEFAULT_DATA: CardConfig = {
  subTitle: '总刊登文章数量',
  value: mock.value,
  hint:'欢迎查看月刊',                 //提示信息
  chartData: mock.saleList,
  des: '月同比:',
  rate: '10.1',
  chartHeight: 120,
};

const dataSource = [
  {value: '10001', label: '全年',xAxis:1,yAxis: 10},
  {value: 10002, label: '1月',xAxis:1,yAxis: 10},
  {value: 10003, label: '2月',xAxis:1,yAxis: 10},
  {value: 10004, label: '3月',xAxis:1,yAxis: 10},
  {value: 10005, label: '4月',xAxis:1,yAxis: 10},
  {value: 10006, label: '5月',xAxis:1,yAxis: 10},
  {value: 10007, label: '6月',xAxis:1,yAxis: 10},
  {value: 10008, label: '7月',xAxis:1,yAxis: 10},
  {value: 10009, label: '8月',xAxis:1,yAxis: 10},
  {value: 10010, label: '9月',xAxis:1,yAxis: 10},
  {value: 10011, label: '10月',xAxis:1,yAxis: 10},
  {value: 10012, label: '11月',xAxis:1,yAxis: 10},
  {value: 10013, label: '12月',xAxis:1,yAxis: 10},
];

function handleChange(value) {
  console.log(value);
}

export interface FusionCardTypebarChartProps {
  cardConfig?: CardConfig;
}

const FusionCardTypebarChart: React.FunctionComponent<FusionCardTypebarChartProps> = (props: FusionCardTypebarChartProps): JSX.Element => {
  const {
    cardConfig = DEFAULT_DATA,
  } = props;

  const { title, subTitle, value, hint,chartData, des, rate, chartHeight } = cardConfig;
  //提示信息
  const content = (<div><p>{hint}</p></div>);
  const MoveTarget = <Button size="small" type="primary" style={{margin: '5px'}}><Icon type="atm" /></Button>;
  return (
    <Card free>
      {
        title ? (
          <>
            <Card.Header title={title} />
            <Card.Divider />
          </>
        ) : null
      }
      <Card.Content>
        <div className={styles.subTitle}>
          {subTitle}
          <Balloon trigger={MoveTarget} triggerType="hover">
            {content}
        </Balloon>
        </div>
        <div className={styles.value}>{value}</div>
        <div className={styles.des}><Select useDetailValue defaultValue={{value: '10001', label: '全年'}} onChange={handleChange} dataSource={dataSource} style={{width: 100}} /></div>
        <Chart
          width={10}
          height={chartHeight}
          data={chartData}
          scale={
            {
            date: {
              range: [0, 1],
            },
          }
        }
          forceFit
          autoFit
          padding={['auto', 'auto']}
        >
        <Coord transpose />
        <Axis name="type" />
        <Axis name="互动量" visible={false} />
        <Tooltip />
        {/* 凸显类型 color={['age', '#E6F6C8-#3376CB']} */}
        <Geom
          type="interval"
          position="type*刊登量"
          color={['刊登量', '#E6F6C8-#3376CB']}
          label={['type*刊登量', (type, value) => numeral(value || 0).format('0.0%')]}
        >
        </Geom>
          {/* <Axis name="xAxis" />
          <Axis name="yAxis" /> */}
          {/* <Legend visible={false} /> 
          <Tooltip  crosshairs={{
            // type: "rect", // 可选值：rect、x、y、cross，分别对应辅助狂、平行x轴辅助线、平行y轴辅助线，十字辅助线
            style: {
                fill: 'skyblue', // 辅助框颜色
                shadowColor: 'skyblue', // 辅助框周边阴影的颜色
                shadowBlur: .6, // 辅助框周边阴影的透明度
                opacity: .6 // 辅助框的透明度
            }
        }}/>
          <Coord transpose />
          <Geom type="interval" position="type*value" color={['type', ['#096DD9', '#209BFA']]} /> */}
        </Chart>
      </Card.Content>
    </Card>
  );
};

export default FusionCardTypebarChart;
